<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'righttree.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.5/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="js/jquery-easyui-1.4.5/themes/default/easyui.css">
    <script type="text/javascript" src="js/jquery-easyui-1.4.5/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui-1.4.5/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="js/jquery-easyui-1.4.5/locale/easyui-lang-zh_CN.js"></script>

  	<script type="text/javascript">
  	
  	var selnode;
  	
  		$(function(){
  			//找到树
  			$("#tt").tree({
  			//设置他的右点击菜单
  				onContextMenu:function(e,node){
  					e.preventDefault();
  					//记录点击节点
  					selnode=node;
  					//显示菜单
  					$("#mm").menu('show',{
  						left:e.pageX,
  						top:e.pageY
  					});
  				}
  			})
  			
  			//提交添加权限
  			$("#but").click(function(){
  			//关闭弹出框
  			$("#window").window("close");
  				var str=$("#formxx").serialize();
  				//异步交互
  				$.get("right/add.action",str,function(res){
  					if(res=="ok"){
  						$("#tt").tree("reload");
  					}
  				})
  			});
  			
  			//提交修改权限
  			$("#modbut").click(function(){
  			//关闭弹出框
  			$("#modwindow").window("close");
  				var str=$("#formx").serialize();
  				//异步交互
  				$.get("right/mod.action",str,function(res){
  					if(res=="ok"){
  						$("#tt").tree("reload");
  					}
  				})
  			});
  		});
  		/*弹出窗口  */
  		function add(){
  			
  			$("#window").window("open");
  			var node=$("#tt").tree("getSelected");
  			$("#xx").val(selnode.ri_id);
  		}
  		
  		/*弹出窗口  */
  		 function mod(){
  			//异步交互找到这个权限
  			var node=$("#tt").tree("getSelected");
  			var id=node.ri_id;
  			//alert(id);
  			$.getJSON("right/getbyid.action","id="+id,function(res){
  				$("#id").val(res.ri_id);
  				$("#ri_parentid").val(res.ri_parentid);
  				$("#ri_name").val(res.ri_name);
  				$("#url").val(res.url);
  			});
  			
  			$("#modwindow").window("open");
  		}
  		//点击删除
  		function del(){
  			if(confirm("你确定要删除这个权限吗？")){
  				$.post("right/del.action","id="+selnode.ri_id,function(res){
  				alert(res);
  					if(res=='ok'){
  						$("#tt").tree("reload");
  					}
  				});
  			}
  		}
  	
  	</script>
  </head>
  
  <body>
  <!-- 展示树 -->
    <ul id="tt" class="easyui-tree" data-options="url:'right/list.action',checkbox:true"></ul>
    <!-- 点击右键菜单 -->
    <div class="easyui-menu" id="mm">
    	<div onclick="add()">增加权限</div>
    	<div onclick="mod()">修改权限</div>
    	<div onclick="del()">删除权限</div>
    </div>
    
    <!-- 弹出窗口 -->
    <div id="window" class="easyui-window" data-options="modal:true,closed:true">
    	<h1>添加权限</h1>
    	<form id="formxx">
    		父权限：<input type="text" id="xx" name="ri_parentid"><br>
    		权限名：<input type="text" name="ri_name"><br>
    		权限路径：<input type="text" name="url"><br>
    		<input type="button" id="but" value="提交">
    	</form>
    </div>
    
     <!-- 修改弹出窗口 -->
    <div id="modwindow" class="easyui-window" data-options="modal:true,closed:true">
    	<h1>修改权限</h1>
    	<form id="formx">
    		<input type="hidden" name="ri_id" value="" id="id">
    		父权限：<input type="text" name="ri_parentid" id="ri_parentid" value="" readonly><br>
    		权限名：<input type="text" name="ri_name" id="ri_name" value=""><br>
    		权限路径：<input type="text" name="url" id="url" value=""><br>
    		<input type="button" id="modbut" value="修改">
    	</form>
    </div>
    
  </body>
</html>
